<!DOCTYPE HTML>
<html xmlns:v-bond="http://www.w3.org/1999/xhtml">
<head>
    <title>Matches</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Marital Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <link href="/css/detail-css/bootstrap-3.1.1.min.css" rel='stylesheet' type='text/css'/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/js/detail-js/jquery.min.js"></script>
    <script src="/js/detail-js/bootstrap.min.js"></script>
    <!-- Custom Theme files -->
    <link href="/css/detail-css/style.css" rel='stylesheet' type='text/css'/>
    <!-- <link href='http://fonts.useso.com/css?family=Oswald:300,400,700' rel='stylesheet' type='text/css'> -->
    <!-- <link href='http://fonts.useso.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'> -->
    <!----font-Awesome----->
    <link href="/css/detail-css/font-awesome.css" rel="stylesheet">
    <script type="text/javascript" src="/js/axios-0.18.0.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/tools/tool.js"></script>

    <!----font-Awesome-- --->
    <style type="text/css">
        #second {
            position: absolute;
            left: 580px;
            top: 35px;
        }

        input {
            outline-style: none;
            border: 1px solid #ccc;
            border-radius: 3px;
            width: 150px;
            font-size: 12px;
            font-weight: 700;
            font-family: "Microsoft soft";
        }

        input:focus {
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
        }

        #button {
            position: absolute;
            right: -65px;
            top: -40px;
        }
    </style>
</head>
<body>
<iframe src="head.html" frameborder="0" width="100%" height="100px"></iframe>
<div class="grid_3" id="app">
    <div class="container">
        <div class="breadcrumb1">
            <ul>
                <a href="#"><i class="fa fa-home home_1"></i></a>
                <span class="divider">&nbsp;|&nbsp;</span>
                <li class="current-page">个人信息页</li>
            </ul>
        </div>
        <div class="col-md-9 profile_left2">
            <div class="profile_top">
                <h2>254879 | 个人信息</h2>
                <div class="col-sm-3 profile_left-top">
                    <img :src="person.customer.photo"
                         width="180px"
                         class="img-responsive" alt=""/>
                </div>
                <form action="#" method="post" id="form">
                    <div class="col_4" style="position: absolute; width: 700px; left: 220px; top: -70px">
                        <div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
                            <ul id="myTab" class="nav nav-tabs nav-tabs1" role="tablist">
                                <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab"
                                                                          data-toggle="tab" aria-controls="home"
                                                                          aria-expanded="true">关于我自己</a></li>
                                <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab"
                                                           aria-controls="profile">家庭详细资料</a></li>
                                <li role="presentation"><a href="#profile1" role="tab" id="profile-tab1"
                                                           data-toggle="tab" aria-controls="profile1">对另一半偏好</a></li>
                            </ul>
                            <div id="myTabContent" class="tab-content">
                                <div role="tabpanel" class="tab-pane fade in active" id="home"
                                     aria-labelledby="home-tab">
                                    <div class="tab_box">
                                        <h1>About your attitude towards love</h1>
                                        <p>{{person.customer.suggest}}</p>
                                    </div>
                                    <div class="basic_1">
                                        <h3>基础与生活方式</h3>
                                        <div class="col-md-6 basic_1-left">
                                            <table class="table_working_hours">
                                                <tbody>
                                                <tr class="opened_1">
                                                    <td class="day_label">名称 :</td>
                                                    <td class="day_value"><input type="text" 
                                                                                 v-model="person.customer.nick"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">体重 :</td>
                                                    <td class="day_value"><input type="text"
                                                                                 v-model="person.customer.weight"/>
                                                    </td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">身高 :</td>
                                                    <td class="day_value"><input type="text"
                                                        v-model="person.customer.height"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">婚姻状况 :</td>
                                                    <td class="day_value"><input type="text"
                                                                                 v-model="person.customer.maritalStatus"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">吸烟 :</td>
                                                    <td class="day_value closed"><input type="text"
                                                        v-model="person.lifeStyle.smoke"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">饮酒 :</td>
                                                    <td class="day_value closed"><input type="text"
                                                        v-model="person.lifeStyle.drink"/></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-md-6 basic_1-left">
                                            <table class="table_working_hours">
                                                <tbody>
                                                <tr class="opened_1">
                                                    <td class="day_label">年龄 :</td>
                                                    <td class="day_value"><input type="text"
                                                                                 v-model="person.customer.age"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">交友 :</td>
                                                    <td class="day_value"><input type="text"
                                                        v-model="person.lifeStyle.age"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">吃辣 :</td>
                                                    <td class="day_value"><input type="text"
                                                        v-model="person.lifeStyle.dict"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">平日运动:</td>
                                                    <td class="day_value"><input type="text" 
                                                        v-model="person.lifeStyle.exercise"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">家务 :</td>
                                                    <td class="day_value" id="customer.bloodType"><input type="text"
                                                        v-model="person.lifeStyle.housework"/></td>
                                                    </td>
                                                </tr>
                                                <tr class="closed">
                                                    <td class="day_label">放松方式 :</td>
                                                    <td class="day_value closed"><input type="text"
                                                        v-model="person.lifeStyle.rest"/></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="basic_1">
                                        <h3>个人详情</h3>
                                        <div class="col-md-6 basic_1-left">
                                            <table class="table_working_hours">
                                                <tbody>
                                                <tr class="opened">
                                                    <td class="day_label">出生时间 :</td>
                                                    <td class="day_value"><input type="text"
                                                        v-model="person.customer.birthday"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">血型:</td>
                                                    <td class="day_value"><input type="text"
                                                        v-model="person.customer.bloodType"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">购房:</td>
                                                    <td class="day_value closed" id="customer.birthday"><input
                                                            type="text" 
                                                            v-model="person.customer.house"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">购车 :</td>
                                                    <td class="day_value closed"><input type="text"
                                                        v-model="person.customer.car"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">子女情况 :</td>
                                                    <td class="day_value closed"><input type="text"
                                                        v-model="person.customer.children"/></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-md-6 basic_1-left">
                                            <table class="table_working_hours">
                                                <tbody>
                                                <tr class="opened_1">
                                                    <td class="day_label">姓名 :</td>
                                                    <td class="day_value"><input type="text"
                                                        v-model="person.customer.name"/></td>
                                                </tr>
                                                <tr class="opened_1">
                                                    <td class="day_label">姓名 :</td>
                                                    <td class="day_value"><input type="text"
                                                        v-model="person.customer.name"/></td>
                                                </tr>
                                                <tr class="opened_1">
                                                    <td class="day_label">属相 :</td>
                                                    <td class="day_value"><input type="text"
                                                        v-model="person.customer.zodiac"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">星座:</td>
                                                    <td class="day_value"><input type="text"
                                                        v-model="person.customer.constellation"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">邮箱:</td>
                                                    <td class="day_value"><input type="text"
                                                        v-model="person.customer.email"/></td>
                                                </tr>
                                                <tr class="opened">
                                                    <td class="day_label">爱好:</td>
                                                    <td class="day_value"><input type="text"
                                                        v-model="person.customer.favorit"/></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="basic_1 basic_2">
                                        <h3>教育与职业</h3>
                                        <div class="basic_1-left">
                                            <table class="table_working_hours">
                                                <tbody>
                                                    <tr class="opened">
                                                        <td class="day_label">毕业于 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.job.graduated"/></td>
                                                    </tr>
                                                    <tr class="opened">
                                                        <td class="day_label">行业 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.job.industry"/></td>
                                                    </tr>
                                                    <tr class="opened">
                                                        <td class="day_label">工作类型 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.job.type"/></td>
                                                    </tr>
                                                    <tr class="opened">
                                                        <td class="day_label">工作状态 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.job.workstate"/></td>
                                                    </tr>
                                                    <tr class="opened">
                                                        <td class="day_label">母语 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.job.language"/></td>
                                                    </tr>
                                                    <tr class="opened">
                                                        <td class="day_label">主业 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.job.major"/></td>
                                                    </tr>
                                                    <tr class="opened">
                                                        <td class="day_label">职业细节 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.job.occupation"/></td>
                                                        </td>
                                                    </tr>
                                                    <tr class="opened">
                                                        <td class="day_label">工作调动 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.job.transfer"/></td>
                                                        </td>
                                                    </tr>
                                                    <tr class="opened">
                                                        <td class="day_label">待遇 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.job.treatment"/></td>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
                                    <div class="basic_3">
                                        <h4>My Details</h4>
                                        <div class="basic_1 basic_2">
                                            <h3>Basics</h3>
                                            <div class="col-md-6 basic_1-left">
                                                <table class="table_working_hours">
                                                    <tbody>
                                                        <tr class="opened">
                                                            <td class="day_label col-md-6">子女情况 :</td>
                                                            <td class="day_value"><input type="text"
                                                                v-model="person.marriage.children"/></td>
                                                        </tr>
                                                        <tr class="opened">
                                                            <td class="day_label">期望的婚姻 :</td>
                                                            <td class="day_value"><input type="text"
                                                                v-model="person.marriage.dreamMarriage"/></td>
                                                        </tr>
                                                        <tr class="opened">
                                                            <td class="day_label">交友态度 :</td>
                                                            <td class="day_value"><input type="text"
                                                                v-model="person.marriage.feeling"/></td>
                                                        </tr>
                                                        <tr class="opened">
                                                            <td class="day_label">幽默感 :</td>
                                                            <td class="day_value"><input type="text"
                                                                v-model="person.marriage.humer"/></td>
                                                        </tr>
                                                        <tr class="opened">
                                                            <td class="day_label">民族 :</td>
                                                            <td class="day_value"><input type="text"
                                                                v-model="person.marriage.nationnality"/></td>
                                                        </tr>
                                                        <tr class="opened">
                                                            <td class="day_label">性格 :</td>
                                                            <td class="day_value"><input type="text"
                                                                v-model="person.marriage.personality"/></td>
                                                        </tr>
                                                        <tr class="opened">
                                                            <td class="day_label">住所 :</td>
                                                            <td class="day_value"><input type="text"
                                                                v-model="person.marriage.residence"/></td>
                                                        </tr>
                                                        <tr class="opened">
                                                            <td class="day_label">家乡 :</td>
                                                            <td class="day_value"><input type="text"
                                                                v-model="person.marriage.hometown"/></td>
                                                        </tr>
                                                        <tr class="opened">
                                                            <td class="day_label">脾气 :</td>
                                                            <td class="day_value"><input type="text"
                                                                v-model="person.marriage.temper"/></td>
                                                        </tr>
                                                        <tr class="opened">
                                                            <td class="day_label">接受异地恋 :</td>
                                                            <td class="day_value"><input type="text"
                                                                v-model="person.marriage.distancelove"/></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane fade" id="profile1" aria-labelledby="profile-tab1">
                                    <div class="basic_1 basic_2">
                                        <div class="basic_1-left">
                                            <table class="table_working_hours">
                                                <tbody>
                                                    <tr class="opened">
                                                        <td class="day_label">年龄 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.condition.age"/></td>
                                                    </tr>
                                                    <tr class="opened">
                                                        <td class="day_label">婚姻状况 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.condition.maritalStatus"/></td>
                                                    </tr>
                                                    <tr class="opened">
                                                        <td class="day_label">身高 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.condition.height"/></td>
                                                    </tr>
                                                    <tr class="opened">
                                                        <td class="day_label">教育 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.condition.education"/></td>
                                                    </tr>
                                                    <tr class="opened">
                                                        <td class="day_label">民族 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.condition.nation"/></td>
                                                    </tr>
                                                    <tr class="opened">
                                                        <td class="day_label">住址 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.condition.address"/></td>
                                                    </tr>
                                                    <tr class="opened">
                                                        <td class="day_label">有照片 :</td>
                                                        <td class="day_value"><input type="text"
                                                            v-model="person.condition.hasNotPhoto"/></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="buttons" id="button">
                    <div class="vertical" style="cursor: pointer" @click="update()">保存</div>
                </div>

            </div>
        </div>
        <div class="col-md-3 match_right" style="position: absolute; right: 0;top: 180px;">
            <ul class="menu">
                <li class="item1"><h3 class="m_2">Show Profiles Created</h3>
                    <ul class="cute">
                        <li class="subitem1"><a href="#">within a week (2) </a></li>
                        <li class="subitem2"><a href="#">within a month (4)</a></li>
                    </ul>
                </li>
                <li class="item1"><h3 class="m_2">Profile type</h3>
                    <ul class="cute">
                        <li class="subitem1"><a href="#">with Photo (3) </a></li>
                    </ul>
                </li>
                <li class="item1"><h3 class="m_2">Marital Status</h3>
                    <ul class="cute">
                        <li class="subitem1"><a href="#">Unmarried (2) </a></li>
                    </ul>
                </li>
                <li class="item1"><h3 class="m_2">Mother Tongue</h3>
                    <ul class="cute">
                        <li class="subitem1"><a href="#">English </a></li>
                    </ul>
                </li>
                <li class="item1"><h3 class="m_2">Education</h3>
                    <ul class="cute">
                        <li class="subitem1"><a href="#">Bachelors-Engineering </a></li>
                        <li class="subitem1"><a href="#">Masters-Engineering </a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            id: '',
            person: {
                customer: {
                    id: "123456",
                    nike: "小茂",
                    phone: "13635319483",
                    photo: "https://at4.jyimg.com/f5/e4/882f9f5376d4e0bb589422a80636/882f9f537_4_avatar_p.jpg",
                    age: 23,
                    sex: "男",
                    birthday: "1996-02-06",
                    address: "重庆市沙坪坝",
                    maritalStatus: "未婚",
                    height: "180",
                    education: "博士",
                    salary: "10000",
                    zodiac: "虎",
                    email: "1460108177@qq.com",
                    children: "无",
                    bloodType: "B型",
                    car: "有",
                    nation: "汉族",
                    memory: 1,
                    weight: "100",
                    constellation: "双鱼座",
                    suggest: "我是一个好人",
                    personality: "上进",
                    favorit: "打篮球"
                },
                condition: {
                    age: 23,
                    nation: "回族",
                    height: 180,
                    education: "硕士",
                    maritalStatus: "未婚",
                    address: "重庆市",
                    has_not_phone: "无"
                },
                lifeStyle: {
                    drink: "社会需要喝点酒",
                    dict: "无特殊习惯",
                    shopping: "平时会购点物",
                    rest: "早出晚归",
                    religious: "天主教",
                    communication: "全是有钱人",
                    housework: "2",
                    pets: "2",
                    smoke: "",
                    exercise: "经常打篮球"
                },
                job: {
                    occupation: "软件工程师",
                    industry: "互联网行业",
                    type: "私人企业",
                    treatment: "双休，五险一金",
                    workstate: "朝九晚五",
                    graduated: "重庆大学",
                    transfer: "完全无可能",
                    major: "计算机科学与技术",
                    language: "英语8级"
                },
                marriage: {
                    id: '',
                    residence: "重庆梁平",
                    native: "重庆",
                    nationnality: "中国",
                    personality: "外向",
                    temper: "一般不发脾气",
                    humer: "非常的幽默",
                    feeling: "专一",
                    children: "没有",
                    marrytime: "时机成熟就结婚",
                    distancelove: "接受",
                    dreamMarriage: ""
                }
            }
        },
        methods: {
            getPersonData() {
                axios.get("/api/customer/queryForById/" + this.person.customer.id).then(res => {
                    if (res.data.flag) {
                        this.person = res.data.data;
                    }
                });
            },
            update() {
                axios.post("/api/customer/updateDetail", this.person).then(res => {
                    if (res.data.flag) {
                        this.person = res.data.data;
                    }
                });
            }
        },
        created() {
            this.id = getCookie("id");
            this.person.customer.id = getCookie('id');
            this.getPersonData();
        }
    });
</script>
<iframe src="foot.html" frameborder="0" height="300px" width="100%" style="margin-top: 700px"></iframe>
</body>
</html>	